<template>
	<view>
		<!-- 这里是标题栏 -->
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<uni-nav-bar fixed status-bar title="我的音乐" @clickLeft="goCloud" @clickRight="goCloud">
			<view slot="left" class="navbar-icon icon-font">&#xe77e;</view>
			<!-- #ifdef APP-PLUS || H5 -->
			<view slot="right" class="navbar-icon icon-font">&#xe649;</view>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->


		<scroll-view scroll-y="true">

			<scroll-view scroll-x="true" class="nav-list">
				<view class="item " v-for="(item,index) in navList" :key="index">
					<image class="img" :src="'/static/image/mine/' + (index + 1) + '.png'"></image>
					<view class="name">{{item.name}}</view>
				</view>
			</scroll-view>

			<uni-list>
				<uni-list-item title="本地音乐" thumb="/static/image/mine/m_15.png"></uni-list-item>
				<uni-list-item title="最近播放" thumb="/static/image/mine/m_17.png"></uni-list-item>
				<uni-list-item title="我的电台" thumb="/static/image/mine/m_19.png"></uni-list-item>
				<uni-list-item title="我的收藏" thumb="/static/image/mine/m_21.png"></uni-list-item>
			</uni-list>

			<view class="recommend-list">
				<!-- 歌单分类块 -->
				<songList title="推荐歌单" :list="recommendSongs" />
			</view>

		</scroll-view>

	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar/uni-nav-bar.vue";
	import uniList from "@/components/uni-list/uni-list/uni-list.vue";
	import uniListItem from "@/components/uni-list/uni-list-item/uni-list-item.vue";
	import songList from '@/components/songList.vue'
	import {
		listRecommendSongs
	}
	from '@/api/index.js';

	export default {
		data() {
			return {
				navList: [{
						name: '私人FM',
						imd: 1
					},
					{
						name: '最嗨电音',
						imd: 2
					},
					{
						name: 'ACG专区',
						imd: 3
					},
					{
						name: 'Sati空间',
						imd: 4
					},
					{
						name: '私藏推荐',
						imd: 5
					},
					{
						name: '因乐交友',
						imd: 6
					},
					{
						name: '亲子频道',
						imd: 7
					},
					{
						name: '古典专区',
						imd: 8
					}
				],
				recommendSongs: []
			};
		},
		onLoad() {
			this._listRecommendSongs();
		},
		methods: {
			goCloud() {
				this.$pubFuc.showToast("暂未开放")
			},
			// 获取推荐歌单
			_listRecommendSongs() {
				listRecommendSongs({
					limit: 6
				}).then(res => {
					
					res.result.forEach(item => {
						if (item.playCount > 10000) {
							item.playCount = parseInt(item.playCount / 10000) + "万";
						}
					});
					this.recommendSongs = res.result;
			
				})
			},
		},
		components: {
			uniNavBar,
			uniList,
			uniListItem,
			songList
		}
	}
</script>

<style lang="scss">
	.nav-list {
		white-space: nowrap;
		text-align: center;
		font-size: 24rpx;
		padding-top: 10px;
		padding-bottom: 14rpx;
		height: 160rpx;
		line-height: 50rpx;
		line-height: 45rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.item {
			width: 160rpx;
			height: 100%;
			display: inline-block;
		}

		.img {
			width: 70rpx;
			height: 70rpx;
			margin: 0 auto;
			border-radius: 50%;
		}

		.name {}

	}
	
	.recommend-list{
		border-top:16rpx solid #f8f8f8;
	}
</style>
